<template>
  <view class="new_list_container">
    <view class="new-box">
      <template v-for="newItem in dataLists">
        <view class="item" :key="newItem.id" @click="goDetail(newItem)">
          <view class="item-title">{{newItem.name}}</view>
          <view class="item-bottom">
            <text class="tip">{{newItem.source}}</text>
            <view class="rg">
              <text class="city">{{newItem.city}}</text>
              <text class="time">{{newItem.created_at}}</text>
            </view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
  import props from './props.js';
  export default {
    name: "NewList",
    mixins: [ props ],
    data() {
      return {
        dataLists: []
      };
    },
    methods: {
		goDetail( item ) {
		  uni.navigateTo( {
			url: `/LawsRegulationsSubpkg/LawsRegulationPublicDetail/LawsRegulationPublicDetail?id=${item.id}&type=2`
		  } )
		},
      setConfigOptions() {
        const keys = Object.entries( this.configOptions )
        this.dataLists = this.dataList.map( item => {
          keys.forEach( ( [ k, v ] ) => ( item[ k ] = item[ v ] ) )
          return item
        } )
        // console.log( this.dataLists, 'data' );
      }
    }
  }
</script>

<style lang="scss" scoped>
  .new_list_container {
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-bottom: 30rpx;
    margin-top: 20rpx;

    .new-box {
      .item {
        padding-left: 20rpx;
        padding-right: 20rpx;
        padding-bottom: 20rpx;
        padding-top: 20rpx;
        margin-bottom: 20rpx;
        background-color: #FFF;
        border-radius: 4px;

        &-title {
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 25rpx;
          color: #333;
          font-weight: 700;
        }

        &-bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .tip {
            // color: #1890FF;
            // background-color: #f5f5f5;
            border-radius: 4px;
            padding-left: 10rpx;
            padding-right: 10rpx;
            font-size: 24rpx;
            font-weight: 700;
          }

          .rg {

            .city,
            .time {
              font-size: 22rpx;
              color: #999;
            }

            .time {
              padding-left: 20rpx;
            }
          }
        }
      }
    }
  }
</style>